Questions
3 of 5
1How would you go about investigating slow React application rendering?
2What are the most common causes of performance issues in React applications?
3How can you minimize bundle size in React applications?
4What are the performance implications of using third-party libraries like Material-UI or Ant Design?
5Discuss react profiler.
reactreact
Basics
JSX
Virtual DOM
Reconciliation
State and Props
Components
Class Components
Function Components
Lifecycle functions
Code Sharing
Hooks
useState
useReducer
useMemo
useContext
useCallback
useEffect
Custom Hooks
New Hooks
HOC
Refs
Data Sharing
Events
Context API
Redux
Router
CSR-SSR
React APIs
Performance Optimisation
ReactDOM
Strict Mode
Security
03 / 05

How can you minimize bundle size in React applications?

Code Splitting (Lazy Loading): Use React.lazy + Suspense to dynamically load components only when needed:
Detect & remove dead code with:
  1. 1

    webpack-bundle-analyzer (visualizes bundle composition)

  2. 2

    source-map-explorer (analyzes bundle size per file)

  3. 3

    ESLint (import/no-unused-modules)

Optimize Third-Party Libraries:
  1. 1

    Replace heavy libraries, Prefer lightweight alternatives

  2. 2

    Load non-critical libraries dynamically

Optimize Images & Assets:
  1. 1

    Compress images with tools like: sharp, svgo

  2. 2

    Use modern formats (WebP, AVIF) instead of PNG/JPG.

  3. 3

    Lazy-load images: <img loading='lazy' src='image.jpg' alt='...' />

Configure Webpack/Rollup for Production
  1. 1

    Minify code: Webpack: TerserPlugin (default in production mode).

  2. 2

    Rollup: @rollup/plugin-terser

  3. 3

    Exclude source maps in production (devtool: false).

Use Server-Side Rendering (SSR) or Static Site Generation (SSG) vai next js